<template>
	<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
		<div class="widgets-content">
			<el-container class="index-style">
				<el-main>
					<div class="card-row">
						<div style="width: 69%;">
							<el-card shadow="hover" class="el-card-row" body-style="padding: 20px">
								<template #header>
									<div class="card-header">
										<span>常用应用</span>
									</div>
								</template>
								<!--								 style="height: 110px;"-->
								<div class="buttonStyle">
									<div v-for="(item, index) in commonApplication" :key="index" style="cursor: pointer;" @click="tap(item.path)">
										<img class="buttonStyle_img" :src="item.icon">
										<div class="buttonStyle_title">{{ item.name }}</div>
									</div>
									<div style="cursor: pointer;" @click="openMenu(commonApplication, 1)">
										<img class="buttonStyle_img" src="img/index/add.png">
										<div class="buttonStyle_title">添加</div>
									</div>
								</div>
							</el-card>
							<div class="card-row mt-20">
								<div style="width: 44%;">
									<el-card shadow="hover" class="el-card-row" body-style="padding: 0 20px 20px 20px">
										<template #header>
											<div class="card-header">
												<span>首页应用</span>
											</div>
										</template>
										<!--										 style="height: 170px;"-->
										<div class="buttonStyle">
											<div v-for="(item, index) in indexApplication" :key="index" class="mt-20" style="cursor: pointer;" @click="tap(item.path)">
												<img class="buttonStyle_img" :src="item.icon">
												<div class="buttonStyle_title">{{ item.name }}</div>
											</div>
											<div class="mt-20" style="cursor: pointer;" @click="openMenu(indexApplication, 2)">
												<img class="buttonStyle_img" src="img/index/add.png">
												<div class="buttonStyle_title">添加</div>
											</div>
										</div>
									</el-card>
								</div>
								<div style="width: 55%;">
									<el-card shadow="hover" class="el-card-row" body-style="padding: 20px">
										<template #header>
											<div class="card-header">
												<span>我的待办</span>
											</div>
										</template>
										<!--										 style="height: 170px;"-->
										<div class="waitStyle" style="height: 190px;">
											<div v-for="(item, index) in waitList" :key="index" class="waitStyle_box">
												<div v-if="item.status == 1" class="box"></div>
												<div v-else class="box box1"></div>
												<div style="width: 95%;">
													<div class="waitStyle_title">{{ item.title }}</div>
													<div class="waitStyle_value">
														<span>{{ item.name }}发起</span>
														<span>{{ item.date }}</span>
													</div>
												</div>
											</div>
										</div>
									</el-card>
								</div>
							</div>
							<el-card shadow="hover" class="el-card-row mt-20" body-style="padding: 20px">
								<template #header>
									<div class="card-header">
										<span>数据中心</span>
									</div>
								</template>
								<div class="dataStyle">
									<div v-for="(item, index) in totalList" :key="index" class="mt-20 dataStyle_box">
										<div></div>
										<div>
											<div class="dataStyle_title">{{ item.title }}</div>
											<div class="dataStyle_value">{{ item.number }}</div>
										</div>
										<div class="dataStyle_line"></div>
									</div>
									<div class="mt-20" style="cursor: pointer;">
										<img class="dataStyle_img" src="img/index/add.png">
										<div class="dataStyle_title">添加</div>
									</div>
								</div>
							</el-card>
							<div class="card-row mt-20">
								<div style="width: 49.5%;">
									<el-card shadow="hover" class="el-card-row" body-style="padding: 20px">
										<template #header>
											<div class="card-header">
												<span style="margin-right: 20px;">活跃商品排行</span>
												<!--												 @change="change"-->
												<el-radio-group v-model="show_date" size="medium" @change="change">
													<el-radio-button :label="1">按销售金额</el-radio-button>
													<el-radio-button :label="2">按销售数量</el-radio-button>
												</el-radio-group>
											</div>
										</template>
										<div style="height: 300px;" class="goods_style">
											<div v-for="(item, index) in goodsList" :key="index" class="card-row" style="margin-bottom: 20px;">
												<div style="display: flex;align-items: center;">
													<div v-if="index == 0" class="goods_style_index">{{ index + 1 }}</div>
													<div v-else-if="index == 1" class="goods_style_index goods_style_index1">{{ index + 1 }}</div>
													<div v-else-if="index == 2" class="goods_style_index goods_style_index2">{{ index + 1 }}</div>
													<div v-else class="goods_style_index goods_style_index3">{{ index + 1 }}</div>
													<div class="goods_style_title">{{ item.goods && item.goods.goods_name }}</div>
												</div>
												<div class="goods_style_title">{{ item.number }}</div>
											</div>
										</div>
									</el-card>
								</div>
								<div style="width: 49%;">
									<el-card shadow="hover" class="el-card-row" body-style="padding: 20px">
										<template #header>
											<div class="card-header">
												<span>数据概览</span>
											</div>
										</template>
										<div style="height: 310px;">
											<scEcharts height="290px" :option="option"></scEcharts>
										</div>
									</el-card>
								</div>
							</div>
						</div>
						<div style="width: 30%;">
							<el-card shadow="hover" class="el-card-row" body-style="padding: 20px">
								<template #header>
									<div class="card-header">
										<span>公告信息</span>
									</div>
								</template>
								<div class="waitStyle" style="height: 230px;">
									<div v-for="(item, index) in waitList" :key="index" class="waitStyle_box">
										<div v-if="item.status == 1" class="box"></div>
										<div v-else class="box box1"></div>
										<div class="card-row" style="width: 100%;">
											<div class="waitStyle_title waitStyle_title1" style="max-width: 350px;">{{ item.title }}</div>
											<div class="waitStyle_value">
												{{ item.date }}
											</div>
										</div>
									</div>
								</div>
							</el-card>
							<el-card shadow="hover" class="el-card-row mt-20" body-style="padding: 20px">
								<template #header>
									<div class="card-header">
										<span>多端协作</span>
									</div>
								</template>
								<div style="height: 100px;" class="operation_style">
									<div v-for="(item, index) in operationList" :key="index" class="operation_style_box">
										<img class="operation_style_img" :src="item.icon">
										<div class="operation_style_title">{{ item.name }}</div>
									</div>
								</div>
							</el-card>
							<el-card shadow="hover" class="el-card-row mt-20" body-style="padding: 20px">
								<template #header>
									<div class="card-header">
										<span>帮助中心</span>
									</div>
								</template>
								<div class="waitStyle" style="height: 260px;">
									<div v-for="(item, index) in waitList" :key="index" class="waitStyle_box" style="align-items: flex-start">
										<div class="box2">{{ index + 1 }}</div>
										<div style="width: 90%;">
											<div class="waitStyle_title">{{ item.title }}</div>
											<div class="waitStyle_value">
												{{ item.date }}
											</div>
										</div>
									</div>
								</div>
							</el-card>
							<el-card shadow="hover" class="el-card-row mt-20" body-style="padding: 5px 20px 20px 20px">
								<template #header>
									<div class="card-header">
										<span>新手向导</span>
									</div>
								</template>
								<div style="height: 285px;">
									<el-tabs v-model="activeName" @tab-click="handleClick" style="border: none">
										<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.name" :name="item.id">
											<div class="textBox" v-if="activeName == 1">
												及时准确的录入商品、客户、供应商与结算账户信息，能够有效的保障经营数据的完整以及后期账务的核算。
											</div>
											<div class="tab_style" v-if="activeName == 1">
												<div v-for="(child, i) in item.children" :key="i" class="tab_style_box" @click="tap(child.path)">
													<img :src="child.icon">
													<div class="tab_style_box_title">{{ child.name }}</div>
													<div class="tab_style_box_value" v-html="child.text"></div>
												</div>
											</div>
											<div v-else class="tab_bg_style" :style="{ backgroundImage: 'url(' + item.bgIcon + ')' }">
												<div @click="tap(child.path)" v-for="(child, i) in item.children" :key="i" class="tab_bg_style_box" :style="{
													top: `${child.starY}px`,
													left: `${child.starX}px`
												}">
												</div>
											</div>
										</el-tab-pane>
									</el-tabs>
								</div>
							</el-card>
						</div>
					</div>
				</el-main>
			</el-container>
		</div>
	</div>
	<setMenu v-if="dialog.setMenu" ref="setMenu" @success="handleSaveSuccess" @closed="dialog.setMenu = false"></setMenu>
</template>
<script>
import scEcharts from "@/components/scEcharts";
import scStatistic from "@/components/scStatistic";
import setMenu from "./components/setMenu.vue";
import * as echarts from 'echarts';

export default {
	components: {
		scEcharts,
		scStatistic,
		setMenu
	},
	data() {
		return {
			dialog: {
				setMenu: false
			},
			customizing: false,
			cakeBackOne: {},
			show_date: 1,
			status: 1,
			count: 0,
			formData: {},
			commonApplication: [],
			indexApplication: [],
			waitList: [
				{
					status: 2,
					title: '系统管理员发起的一条代办信息，请您注意查看并操作。',
					name: '管理员',
					date: '2025-01-23  10:05',
				},
				{
					status: 1,
					title: '系统管理员发起的一条代办信息，请您注意查看并操作。系统管理员发起的一条代办信息，请您注意查看并操作。',
					name: '管理员',
					date: '2025-01-23  10:05',
				},
				{
					status: 2,
					title: '系统管理员发起的一条代办信息，请您注意查看并操作，系统管理员发起的一条代办信息。',
					name: '管理员',
					date: '2025-01-23  10:05',
				},
				{
					status: 1,
					title: '系统管理员发起的一条代办信息，请您注意查看并操作。',
					name: '管理员',
					date: '2025-01-23  10:05',
				},
				{
					status: 1,
					title: '系统管理员发起的一条代办信息，请您注意查看并操作。',
					name: '管理员',
					date: '2025-01-23  10:05',
				}
			],
			totalList: [
				// {
				// 	title: '客户总数',
				// 	number: '0'
				// },
				// {
				// 	title: '供应商总数',
				// 	number: '0'
				// },
				// {
				// 	title: '库存总数',
				// 	number: '0'
				// },
				// {
				// 	title: '库存预警',
				// 	number: '0'
				// },
				// {
				// 	title: '职员总数',
				// 	number: '0'
				// },
				// {
				// 	title: '总资产',
				// 	number: '0'
				// },

				// {
				// 	title: '账户余额',
				// 	number: '0'
				// },
				// {
				// 	title: '库存总数',
				// 	number: '0'
				// },
				// {
				// 	title: '应收欠款',
				// 	number: '0'
				// },
				// {
				// 	title: '应付欠款',
				// 	number: '0'
				// },
				// {
				// 	title: '销售额',
				// 	number: '0'
				// },
				// {
				// 	title: '销售笔数',
				// 	number: '0'
				// },
				// {
				// 	title: '毛利润',
				// 	number: '0'
				// },
				// {
				// 	title: '资金入账',
				// 	number: '0'
				// },
				// {
				// 	title: '生产计划总数',
				// 	number: '0'
				// },
				// {
				// 	title: '今日报工数量',
				// 	number: '0'
				// },
				// {
				// 	title: '今日任务数',
				// 	number: '0'
				// }
			],
			goodsList: [],
			number_list: [],
			price_list: [],
			option: {
				title: {
					text: '',
				},
				grid: {
					top: '50px'
				},
				legend: {
					data: ['销售', '进货']
				},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					data: []
				},
				yAxis: {
					type: 'value'
				},

				series: [
					{
						name: "销售",
						data: [],
						type: 'line',
						smooth: true,
						color: '#FFAF42', // 设置折线颜色
						areaStyle: {
							// 设置渐变色
							color: {
								type: 'linear', // 使用线性渐变
								x: 0, // 从左到右渐变
								y: 0,
								x2: 0,
								y2: 1, // 渐变从上到下
								colorStops: [
									{ offset: 0, color: 'RGBA(233, 230, 199, 1)' }, // 渐变起点颜色（半透明红色）
									{ offset: 1, color: 'RGBA(251, 250, 243, 1)' }  // 渐变终点颜色（透明）
								],
								global: false // 如果为 true，表示渐变色是全局的；否则是局部的
							}
						}
					},
					{
						name: "进货",
						data: [],
						type: 'line',
						smooth: true,
						color: '#3AC699', // 设置折线颜色
						areaStyle: {
							// 设置渐变色
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: 'RGBA(220, 245, 237, 1)' }, // 渐变起点颜色（半透明绿色）
									{ offset: 1, color: 'RGBA(253, 251, 248, 1)' }   // 渐变终点颜色（透明）
								],
								global: false
							}
						}
					}
				]
			},
			operationList: [
				{
					name: '小程序码',
					icon: 'img/index/icon4.png',
				},
				{
					name: 'pda下载',
					icon: 'img/index/icon5.png',
				},
				{
					name: 'windows',
					icon: 'img/index/icon6.png',
				},
			],
			activeName: 1,
			tabList: [
				{
					id: 1,
					name: '初始资料录入',
					children: [
						{
							name: '仓库',
							text: '管理您的<br>仓库信息',
							icon: 'img/index/tab1.png',
							path: '/ware/ware'
						},
						{
							name: '商品资料',
							text: '管理商品信息<br>及初始库存',
							icon: 'img/index/tab2.png',
							path: '/goods/info'
						},
						{
							name: '客户',
							text: '维护您的客户<br>信息及欠款',
							icon: 'img/index/tab3.png',
							path: '/sale/client/list'
						},
						{
							name: '供应商',
							text: '维护您的供应商<br>信息及欠款',
							icon: 'img/index/tab3.png',
							path: '/procure/apply/list'
						},
						{
							name: '结算账户',
							text: '管理账户信息<br>及初始余额',
							icon: 'img/index/tab1.png',
							path: '/finance/account'
						}
					]
				},
				{
					id: 2,
					name: '进货流程',
					bgIcon: 'img/index/bg1.png',
					children: [
						{
							name: '供应商',
							starY: 0,
							starX: 0,
							path: '/procure/apply/list'
						},
						{
							name: '进货订单',
							starY: 0,
							starX: 125,
							path: '/procure/order'
						},
						{
							name: '进货单',
							starY: 0,
							starX: 250,
							path: '/procure/inhouse'
						},
						{
							name: '库存查询',
							starY: 0,
							starX: 370,
							path: '/ware/stock'
						},
						{
							name: '进货退货单',
							starY: 105,
							starX: 125,
							path: '/procure/return'
						}
					]
				},
				{
					id: 3,
					name: '销售流程',
					bgIcon: 'img/index/bg2.png',
					children: [
						{
							name: '客户',
							starY: 0,
							starX: 0,
							path: '/sale/client/list'
						},
						{
							name: '销售单',
							starY: 0,
							starX: 125,
							path: '/sale/contract'
						},
						{
							name: '库存查询',
							starY: 0,
							starX: 250,
							path: '/ware/stock'
						},
						{
							name: '销售报表',
							starY: 0,
							starX: 370,
							path: ''//??
						},
						{
							name: '销售退货单',
							starY: 105,
							starX: 125,
							path: '/sale/return'
						}
					]
				},
				{
					id: 4,
					name: '库存管理',
					bgIcon: 'img/index/bg3.png',
					children: [
						{
							name: '商品列表',
							starY: 0,
							starX: 95,
							path: '/goods/info'
						},
						{
							name: '库存查询',
							starY: 0,
							starX: 190,
							path: '/ware/stock'
						},
						{
							name: '库存盘点',
							starY: 115,
							starX: 5,
							path: '/ware/panorder'
						},
						{
							name: '库存调拨单',
							starY: 115,
							starX: 95,
							path: '/ware/diaobo'
						},
						{
							name: '其他入库单',
							starY: 115,
							starX: 190,
							path: '/ware/otherin'
						},
						{
							name: '其他出库单',
							starY: 115,
							starX: 280,
							path: '/ware/otherout'
						},
						{
							name: '库存预警',
							starY: 115,
							starX: 370,
							path: ''
						}
					]
				},
				{
					id: 5,
					name: '财务管理',
					bgIcon: 'img/index/bg4.png',
					children: [
						{
							name: '账户余额',
							starY: 0,
							starX: 180,
						},
						{
							name: '收款单',
							starY: 115,
							starX: 0,
							path: '/finance/other/income'
						},
						{
							name: '付款单',
							starY: 115,
							starX: 120,
							path: '/finance/other/expend'
						},
						{
							name: '资金调拨单',
							starY: 115,
							starX: 240,
							path: '',
						},
						{
							name: '往来单位欠款',
							starY: 115,
							starX: 365,
							path: '',
						}
					]
				}
			]
		};
	},
	mounted() {
		this.$emit('on-mounted')
		this.getMenuList()
		this.getData()
	},
	methods: {
		handleSaveSuccess() {
			this.getMenuList()
		},
		openMenu(menuList, type) {
			this.dialog.setMenu = true
			var menu_ids = []
			menuList.map(item => {
				menu_ids.push(item.menu_id)
			})
			this.$nextTick(() => {
				this.$refs.setMenu.open({ menu_ids: menu_ids, type: type })
			})

		},
		async getData() {
			var res = await this.$API.common.getIndexData.get();
			this.price_list = res.data.goods_list.price_list
			this.number_list = res.data.goods_list.number_list

			this.goodsList = this.show_date == 1 ? this.price_list : this.number_list
			this.option.xAxis.data = res.data.dateList
			this.option.series[0].data = res.data.overview.sale_list
			this.option.series[1].data = res.data.overview.purchase_list
			this.totalList = res.data.today

		},
		async getMenuList() {
			var res = await this.$API.common.getMenu.get();
			this.commonApplication = res.data.menu
			this.indexApplication = res.data.menu_index

		},
		/**新手向导图标点击*/
		tap(path) {
			if (!path) {
				this.$message.error("暂未开放")
				return
			}
			console.log('111', this.$TOOL.data.get("DASHBOARDGRID"))
			let dashboardGrid = this.$TOOL.data.get("DASHBOARDGRID")
			let isYes = false
			dashboardGrid.map(item => {
				if (item == path) {
					isYes = true
				}
			})
			if (isYes) {
				this.$router.push({
					path: path
				});
			} else {
				this.$message.error("暂无权限，请联系管理员！")
			}
		},
		/**待办事项tab点击事件*/
		change(e) {
			this.show_date = e
			this.goodsList = e == 1 ? this.price_list : this.number_list
			// this.getNumber()
		},
		async getNumber() {
			var res = await this.$API.admin.showHome.get({ show_date: this.show_date });
			this.formData = res.data
			this.cakeBackOne = {
				title: [
					{
						text: '采购量',
						left: 'center', // 主标题居中显示
						top: '40%',      // 设置主标题距离顶部的距离
						textStyle: {
							fontSize: 16,
							fontWeight: 'bold',
							color: '#333333', // 副标题颜色
						},
					},
					{
						text: res.data.purchase_number,
						textStyle: {
							fontSize: 30,
							fontWeight: 'bold',
							color: '#FF9900', // 副标题颜色
						},
						left: 'center', // 副标题也居中显示
						top: '55%'       // 可以自由设定副标题相对于容器顶部的具体位置
					}
				],

				series: [
					{
						name: '数量',
						type: 'pie',
						radius: ['65%', '85%'],
						center: ['50%', '55%'],  // 将圆环图的圆心位置设置为中心
						data: [
							{ value: res.data.picking_out_number, name: '领用量' },
							{ value: res.data.picking_out_not_number, name: '未领用' },
						],
						label: {
							show: true,
							fontSize: 16,
							position: 'outside', // 数据标签在外部显示
							formatter: '{b}: {c}' // 显示格式：名称和值
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						itemStyle: {
							normal: {
								color: function (params) {
									var colorList = [
										echarts.graphic.LinearGradient(0, 0, 1, 1, [ // 渐变方向从左上到右下
											{ offset: 0, color: '#FF9900' },  // 起始颜色
											{ offset: 1, color: '#FFCF10' }   // 结束颜色
										]),
										'#FFF5E6'
									];
									// var colorList = [
									// 	'#4EBEFF', '#D37FFF'
									// ];
									return colorList[params.dataIndex % colorList.length];
								}
							}
						}
					}
				]
			}
		},
	},
};
</script>

<style scoped lang="scss">
.widgets-home {
	display: flex;
	flex-direction: row;
	flex: 1;
	height: 100%;
}

.widgets-content {
	flex: 1;
	overflow: auto;
	overflow-x: hidden;
}

.index-style {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-style: normal;
	text-transform: none;

	::-webkit-scrollbar {
		display: none;
	}

	.tab_bg_style {
		width: 440px;
		height: 190px;
		position: relative;
		margin: 20px auto;
		background-position: center center;
		background-repeat: no-repeat;

		.tab_bg_style_box {
			width: 65px;
			height: 80px;
			position: absolute;
			cursor: pointer;
			//background: #01a066;
		}
	}

	.tab_style {
		display: grid;
		justify-content: space-evenly;
		grid-template-columns: repeat(auto-fill, 85px);
		grid-gap: 10px;
		flex-wrap: wrap;
		text-align: center;
		margin-top: 20px;

		.tab_style_box {
			cursor: pointer;

			.tab_style_box_title {
				font-weight: 400;
				font-size: 14px;
				color: #333333;
				margin-top: 10px;
			}

			.tab_style_box_value {
				font-weight: 400;
				font-size: 10px;
				color: #999999;
				line-height: 14px;
				margin-top: 10px;
			}
		}
	}

	.textBox {
		background: #FAFAFA;
		border-radius: 5px 5px 5px 5px;
		font-weight: 400;
		font-size: 12px;
		color: #999999;
		line-height: 20px;
		padding: 10px;
	}

	.goods_style {
		overflow: scroll;

		.goods_style_index {
			width: 20px;
			height: 20px;
			background: #FF7640;
			border-radius: 5px 5px 5px 5px;
			font-weight: 400;
			font-size: 14px;
			color: #FFFFFF;
			line-height: 20px;
			text-align: center;
			margin-right: 20px;
		}

		.goods_style_index1 {
			background: #FDB65A;
		}

		.goods_style_index2 {
			background: #FFD73B;
		}

		.goods_style_index3 {
			background: #CBE4FE;
		}

		.goods_style_title {
			font-weight: 400;
			font-size: 14px;
			color: #333333;
		}
	}

	.waitStyle {
		overflow: scroll;

		.waitStyle_box {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
		}

		font-weight: 400;

		.waitStyle_title {
			font-size: 14px;
			color: #333333;
			line-height: 22px;
		}

		.waitStyle_title1 {
			white-space: nowrap;
			/* 禁止换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 超出部分显示省略号 */
		}

		.waitStyle_value {
			font-size: 12px;
			color: #999999;
			line-height: 22px;
		}

		.box {
			width: 8px;
			height: 8px;
			background: #409EFE;
			border-radius: 50%;
			margin-right: 10px;
		}

		.box1 {
			background: #E6E6E6;
		}

		.box2 {
			width: 20px;
			height: 20px;
			background: #409EFE;
			border-radius: 5px 5px 5px 5px;
			font-weight: 400;
			font-size: 14px;
			text-align: center;
			line-height: 20px;
			color: #FFFFFF;
			margin-right: 10px;
		}
	}

	.dataStyle {
		display: grid;
		justify-content: space-evenly;
		grid-template-columns: repeat(auto-fill, 180px);
		grid-gap: 10px;
		flex-wrap: wrap;
		text-align: center;

		.dataStyle_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.dataStyle_line {
			width: 1px;
			height: 34px;
			background: #E6E6E6;
		}

		.dataStyle_title {
			font-weight: 400;
			font-size: 14px;
			color: #999999;
		}

		.dataStyle_value {
			font-weight: bold;
			font-size: 24px;
			color: #333333;
			margin-top: 15px;
		}

		.dataStyle_img {
			width: 50px;
			height: 50px;
			margin-top: -10px;
			margin-bottom: 10px;
		}
	}

	.operation_style {
		display: grid;
		justify-content: space-evenly;
		grid-template-columns: repeat(auto-fill, 150px);
		grid-gap: 10px;
		flex-wrap: wrap;

		.operation_style_box {
			width: 150px;
			background: #F7F7F7;
			border-radius: 10px 10px 10px 10px;
			height: 100px;
			padding: 15px 0;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-around;
			cursor: pointer;
		}

		.buttonStyle_img {
			width: 24px;
			height: 24px;
		}

		.buttonStyle_title {
			font-weight: 400;
			font-size: 14px;
			color: #333333;
			margin-top: 10px;
		}
	}

	.buttonStyle {
		display: grid;
		justify-content: space-evenly;
		grid-template-columns: repeat(auto-fill, 70px);
		grid-gap: 10px;
		flex-wrap: wrap;

		.buttonStyle_img {
			width: 50px;
			height: 50px;
			display: block;
			margin: 0 auto;
		}

		.buttonStyle_title {
			font-weight: 400;
			font-size: 14px;
			color: #333333;
			text-align: center;
			margin-top: 10px;
		}
	}

	.mt-20 {
		margin-top: 20px;
	}

	.card-row {
		display: flex;
		justify-content: space-between;
	}

	.el-card {
		border: none;
		border-radius: 10px 10px 10px 10px;
	}

	:deep(.el-radio-button__inner) {
		background: #E5F1FE;
		color: #409EFE;
		border: none;
	}

	:deep(.el-tabs__nav-wrap::after) {
		height: 0;
	}

	:deep(.el-tabs__item) {
		font-weight: 500;
		font-size: 14px;
	}

	.card-header {
		display: flex;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 16px;
		color: #333333;
		padding-bottom: 15px;
		border-bottom: 1px solid #E6E6E6;

		img {
			width: 20px;
			height: 20px;
			margin-right: 10px;
		}

		.card-header-style {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 18px;
			color: #333333;

			>span:nth-child(2) {
				font-weight: bold;
				font-size: 24px;
				color: #333333;
				margin-left: 10px;
			}
		}
	}
}
</style>
